{##																#}
{## Developed for the University of Nottingham G52GRP module 	#}
{##																#}
{## Written by:	Marcus Whybrow (mxw18u) 						#}
{## Group: 		gp09-drm 										#}
{##																#}

{% extends "libraries/library_list.html" %}

{% load truncate_filters %}

{% block title %}
{{ library.name|truncatechars:40 }} | {{ block.super }}
{% endblock %}

{% block page_title %}libraries-library-detail{% endblock %}

{% block breadcrumbs %}
{{ block.super }}
<li id="bc-libraries-library-detail" class="library"><a href="{% url library_detail library.slug %}">{{ library.name|truncatechars:40 }}</a></li>
{% endblock %}

{% block head %}
<link rel="stylesheet" href="/media/css/jquery-ui-theme/jquery-ui-1.8rc1.custom.css" />
<script type="text/javascript" src="/media/js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/media/js/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="/media/js/utils.js"></script>
<script type="text/javascript">
	$(function() {
		
		// Close events for overlays
		
		$('#accept-overlay input.overlay-ok').click(function() {
			 $.unblockUI();
			 return false;
		});
		
		$('#delete-overlay input.overlay-ok').click(function() {
			
			var pk = $(this).attr('id');
			
			connection('{% url api_delete_collection %}', { pk: pk }, function(data) {
				$('#' + pk).slideUp('200', function() {
					$(this).remove();
				});
			});
			
			$.unblockUI();
			return false;
		});
		
		$('#delete-overlay input.overlay-cancel').click(function() {
			$.unblockUI();
			return false;
		});
		
		// Editing Details
		
		$("div.editable .detail").editable(function(value, settings) {
			var detail = $(this);
			if (detail.attr('id') == 'name') {
				postData = { name: value, pk: '{{ library.pk }}' }
			} else if (detail.attr('id') == 'description') {
				postData = { description: value, pk: '{{ library.pk }}' }
			}
			var result = '';
			
			connection('{% url api_save_collection %}', postData, function(data) {
				if (detail.attr('id') == 'name') {
					result = data.collection.name;
					window.location = data.collection.url;
					
				} else if (detail.attr('id') == 'description') {
					result = data.collection.description;
				}
			}, undefined, undefined, false);
			  
			return result;
		}, { 
			cssclass: 'editing',
			submit: 'save',
			cancel: 'cancel',
			width: '448px'
		});
				
		// Adding Bookshelves
		
		$("form#new-bookshelf-form").submit(function() {
			
			var form = $(this);
			
			var formData = form.serialize();
			
			form.block({
				fadeIn: 10,
				fadeOut: 10,
				css: { 
					border: 'none',
					padding: '15px', 
					backgroundColor: '#ff', 
					'-webkit-border-radius': '10px', 
					'-moz-border-radius': '10px', 
					opacity: .5, 
					color: '#000' 
				}
			});
			  
			connection('{% url api_save_collection %}', formData, function(data) {
				var name = data.collection.name;
				
				var truncateLength = 40;
			
				if (name.length > truncateLength) {
					name = name.substring(0, truncateLength) + '...';
				}
								
				var description = data.collection.description;
				var url = data.collection.url;
				var pk = data.collection.pk;
				
				var listItem = '<li id="' + pk + '" style="display: none">' +
				'<img src="/media/images/events/drawer.png" width="16" height="16" title="Bookshelf" />' +
				'<a class="item-title img-title" href="' + url + '">' + name + ' →</a>' +
				'<p class="item-subtitle">0 Books</p>' +
				'<button class="delete">delete</button>' +
				'</li>';
				
				$("ul#bookshelf-list").append(listItem);
				
				var li = $('li#' + pk);
				
				li.hover(bookshelf_hover_over, bookshelf_hover_out);
				li.find("button.delete").click(bookshelf_click_delete);
				
				li.droppable({
					hoverClass: 'ui-state-hover',
					drop: droppable
				});
				
				li.slideDown('200');
				
			}, function() {
				form.unblock();
			});
			
			form.find(':input[name="name"]').val('');
			return false;
		});
		
		// Bookshelf List
		
		function bookshelf_hover_over() {
			$(this).find('button.delete, button.really').css('display', 'block');
		}
		
		function bookshelf_hover_out() {
			$(this).find('button.delete').css('display', 'none');
			$(this).find('button.really').remove();
		}
		
		function bookshelf_click_delete() {
			var bookshelf_row = $(this).parent();
			var bookshelf_pk = bookshelf_row.attr("id");
			
			if (bookshelf_row.find('button.really').length == 0) {
				
				bookshelf_row.append('<button class="really">really</button>');
			
				var really = bookshelf_row.find('button.really');
				
				really.css('display', 'block');
				
				really.click(function() {
					
					connection('{% url api_get_collection_detail %}', { pk: bookshelf_pk }, function(data) {
						if (data.collection.children == 0 && data.collection.books == 0) {
							connection('{% url api_delete_collection %}', { pk: bookshelf_pk }, function(data) {
								bookshelf_row.slideUp('200', function() {
									$(this).remove();
								});
							});
						} else {
							// The collection cannot be deleted without user intervention
							$('#delete-overlay input.overlay-ok').attr('id', data.collection.pk);
							overlay($('#delete-overlay'));
						}
					});
				});
			}
		}
		
		$("ul#bookshelf-list li").append('<button class="delete">delete</button>');
				 
		$("ul#bookshelf-list li").hover(bookshelf_hover_over, bookshelf_hover_out);
				 
		$("ul#bookshelf-list li button.delete").click(bookshelf_click_delete);
		
		var helpHtml = $('div#help-box').html();
		
		$('a#unsorted-bin-changer').click(function() {
			
			var li = $(this).parent();
			
			if (! li.hasClass('selected')) {
				li.siblings().removeClass('selected');
				li.addClass('selected');
				
				$('div#help-box').animate({
					opacity: 0
				}, function() {
					$('div#help-box').html($('div#unsorted-bin-box').html());
					
					$('li.draggable').draggable({ 
						revert: true,
						helper: 'original',
						opacity: 0.7
					});
					
					$('div#help-box').animate({
						opacity: 1
					});
				});
			}
			
			return false;
		});
		
		$('a#help-changer').click(function() {
			
			var li = $(this).parent();
			
			if (! li.hasClass('selected')) {
				li.siblings().removeClass('selected');
				li.addClass('selected');
				
				$('div#help-box').animate({
					opacity: 0
				}, function() {
					$('div#help-box').html(helpHtml);
					
					$('div#help-box').animate({
						opacity: 1
					});
				});
			}
			
			return false;
		});
		
		function droppable(event, ui) {
			var profile_pk = ui.draggable.attr('id');
			var collection_pk = event.target.id;
						
			connection('{% url api_save_profile %}', { pk: profile_pk, collection_pk: collection_pk }, function() {
				$('#' + profile_pk).slideUp('200', function() {
					$(this).remove();
				});
			});
		}
		
		$('ul#bookshelf-list li.droppable').droppable({
			hoverClass: 'ui-state-hover',
			drop: droppable
		});
		
		// If the URL has '#unsorted' on the end load the unsorted bin
		if (window.location.hash == '#unsorted') {
			$('#unsorted-bin-changer').click();
		}
		
	});
</script>
{% endblock %}

{% block content %}
	<div class="section">
		<div class="inner">
			<div class="container clearfix">
				<div class="two-thirds alpha">
					<div class="editable">
						<h2 id="name" class="h2-detail detail">{{ library.name }}</h2>
					</div>
					<div class="editable">
						<p id="description" class="p-detail detail">{{ library.description|default:"No Description (Click here to add one)" }}</p>
					</div>
				</div>
				<div class="third omega">
					<div class="library-switcher">
						<p>This Library has <strong>{{ library.books.all|length }} book{{ library.books.all|pluralize }}</strong> which you should move from its unsorted bin into a bookshelf.</p>
						
						<ul class="clearfix">
							<li class="alpha"><a id="unsorted-bin-changer" href="{{ library.get_absolute_url }}{{ unsorted_bin.slug }}/">{{ unsorted_bin.value }}</a></li>
							<li class="omega selected"><a id="help-changer" href="">Help</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="section">
		<div class="inner">
			<div class="container clearfix">
				<div class="two-thirds alpha">
					<div class="rounded-wrapper">
						<h3>Bookshelves</h3>
						<ul id="bookshelf-list" class="double-title item-list">
							{% for bookshelf in library.children.all %}
								<li id="{{ bookshelf.pk }}" class="droppable">
									<img src="/media/images/events/drawer.png" width="16" height="16" title="Bookshelf" />
									<a class="item-title img-title" href="{{ bookshelf.get_absolute_url }}">{{ bookshelf.name|truncatechars:40 }} →</a>
									<p class="item-subtitle">{{ bookshelf.books.all|length }} book{{ bookshelf.books.all|length|pluralize }}</p>
								</li>
							{% endfor %}
							{% if library.children.all %}
							{% else %}
								<p class="center">This library has no bookshelves, add some here.</p>
							{% endif %}
						</ul>
						<h3>Add A New Bookshelf</h3>
						<form id="new-bookshelf-form" action="" method="post">
							<input type="hidden" name="parent_pk" id="parent_pk" value="{{ library.pk }}" />
							<input type="hidden" name="collection_type" id="collection_type" value="bookshelf" />
							{{ form.name }}
							<input type="submit" value="Create" />
						</form>	
					</div>
				</div>
				<div id="help-box" class="third omega">
					<h3>Overview</h3>
					<p>Bookshelves are a way to organise collections of books, which you might in real life store next to each other on the same "bookshelf".</p>
					
					<h3>Deleting</h3>
					<p>When you delete a bookshelf you must decide what to do with the books it contains. You can move them to another area, or delete them as well.</p>
					
					<h3>Editing</h3>
					<p>If you want to change the name or description of a bookshelf, you must first choose it from the list to the left.</p>
					
					<h3>Adding</h3>
					<p>No two bookshelves in the same library may have the same name.</p>
				</div>
				<div style="display:none;" id="unsorted-bin-box" class="third omega">
					<div class="rounded-wrapper">
						<ul class="item-list img-items">
							{% for book in library.books.all %}
								<li id="{{ book.pk }}" class="draggable" ><img src="{{ book.book_instance.thumbnail_small }}" /><a href="{{ book.get_absolute_url }}" class="item-title">{{ book.title }}</a></li>
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="section">
		<div class="inner">
			<p class="center last"><a href="{% url add_books %}?c={{ library.pk }}">Add Books In Batch To This Library</a></p>
		</div>
	</div>

	<div id="accept-overlay" class="overlay">
		<div class="overlay-header">
			<h1 class="target"></h1>
		</div>
		<div class="overlay-body">
			<p class="target"></p>
		</div>
		<div class="overlay-footer clearfix">
			<input type="button" class="overlay-ok overlay-button" value="Alright" /> 
		</div>
	</div>
	
	<div id="delete-overlay" class="overlay">
		<div class="overlay-header">
			<h1>This Library Is Not Empty</h1>
		</div>
		<div class="overlay-body">
			<p class="error target">If you delete this bookshelf, all its books will be deleted forever. This cannot be undone.</p>
		</div>
		<div class="overlay-footer clearfix">
			<input style="float:left" type="button" class="overlay-cancel overlay-button" value="← Cancel" />
			<input type="button" class="overlay-ok overlay-button danger" value="OK, delete everything!" />
		</div>
	</div>
{% endblock %}